<template>
  <div class="echarts">
    <div id="ChartThree" :style="{ height: '100%'}"></div>
  </div>
</template>

<script>
  // 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  
  methods: {
    drawLine() {
      
      let mainChart = echarts.init(document.getElementById('ChartThree'));
      window.addEventListener('resize', mainChart.resize);
      // 绘制图表
      mainChart.setOption({
        title: {
          text: 'ECharts'
        },
        tooltip: {},
        
        series: [{
          name: 'Clouds',
          type: 'pie',
            data:[
              {value:15, name:'先进制造业'},
              {value:15, name:'交通运输业'},
              {value:25, name:'能源'},
              {value:10, name:'民生'},
              {value:15, name:'基础建设'},
              {value:10, name:'水利'},
              {value:15, name:'现代服务业'},
              {value:25, name:'生态'}
            ]
         }]
      });
    }
    
  }
}  
</script>
<style scoped>
.echarts {
    text-align: center;
    padding-left: 20px;
    padding-top: 20px;
    width: 50%;
    height: 50%;
    float: left;
  }
</style>
 